<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/pet.css">
  <link rel="stylesheet" href="fonts/iconfont.css">
  <script src="js/vue.js"></script>
  <script src="js/cdn.axios.js"></script>
</head>
<body>
<div id="root">
  <!-- 导航栏部分 -->
  <div class="nav">
    <h1 class="left">宠物管理系统</h1>
    <div class="right">
      <span class="user">欢迎管理员登录</span>
      <span><a href="index.html">登出</a></span>
    </div>
  </div>

  <!-- 内容部分 -->
  <div class="container">
    <!-- 左侧下拉菜单 -->
    <div class="leftnav">
      <div>后台管理</div>
      <ul>
        <li><a href="user.html">用户信息</a></li>
        <li><a href="admin.html">管理员信息</a></li>
        <li><a href="pet.html">宠物管理</a></li>
        <li><a href="adoptmanger.html">领养管理</a></li>
        <li><a href="agree.html">同意领养列表</a></li>
        <li><a href="disagree.html">不同意领养列表</a></li>
      </ul>
    </div>

    <!-- 右侧表单 -->
    <div class="rightform">
      <div class="form">
        <h1>用户管理</h1>
        <div class="ipt">
          <span>用户名称</span>
          <span class="search">
                        <input type="text" name="" id="" v-model="nickname">
<!--                        <a href="" class="iconfont" @click="searchByUsername">&#xe605;</a>-->
                        <button class="iconfont btn" @click="searchByUsername">&#xe605;</button>
                    </span>
          <button class="toggleModal add" @click="add">新增</button>
          <button class="toggleModal add" @click="reset">重置</button>
        </div>
        <table class="table">
          <!-- 标题 -->
          <caption>用户信息列表</caption>
          <thead>
          <tr>
<!--            <th>编号</th>-->
            <th>用户名</th>
            <th>密码</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>有无领养经历</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(user,i) in users">
<!--            <td>{{i}}</td>-->
            <td>{{user.nickName}}</td>
            <td>{{user.secret}}</td>
            <td>{{user.gender}}</td>
            <td>{{user.age}}</td>
            <td>{{user.phoneNum}}</td>
            <td>{{user.email}}</td>
            <td>{{user.address}}</td>
            <td v-if="user.experience===0">无</td>
            <td v-if="user.experience===1">有</td>
            <td>
              <button class="toggleModal update" @click="update(user.id)">修改</button>
              <button class="toggleModal delete" @click="del(user.id)">删除</button>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- 修改模态框部分 -->

          <div class="modal" v-show="updateShow">
            <div class="modal-header">
              <p class="title" >修改用户信息</p>
              <p class="close" @click="close">×</p>
            </div>
            <form class="modal-content" >
              <label>
                <span>用户名称</span>
                <input type="text"  id="nickName">
              </label>
              <label>
                <span>用户密码</span>
                <input type="text" id="secret">
              </label>
              <label>
                <span>电话号码</span>
                <input type="text" id="phoneNum">
              </label>
              <label>
                <span>性别</span>
                <input type="text" id="gender">
<!--                <select value="0" id="gender">-->
<!--                  <option value="0">男</option>-->
<!--                  <option value="1">女</option>-->
<!--                </select>-->
              </label>
              <label>
                <span>年龄</span>
                <input type="text" id="age">
              </label>
              <label>
                <span>Email</span>
                <input type="text" id="email">
              </label>
                <label>
                    <span>地址</span>
                    <input type="text" id="address">
                </label>
              <label><span>有无领养</span>
                <select value="0" id="experience">
                  <option value="0">有领养经历</option>
                  <option value="1">没有领养经历</option>
                </select>
              </label>
            </form>
            <div class="modal-footer">
              <button class="close btn" @click="close">关闭</button>
              <button class="btn" @click="updatepreserve(userForm.id)">提交修改</button>
            </div>
          </div>

        <!-- 新增模态框部分 -->
          <div class="modal" v-show="insertShow">
            <div class="modal-header">
              <p class="title" >新增用户信息</p>
              <p class="close" @click="close">×</p>
            </div>
            <form class="modal-content">
              <label>
                <span>用户名称</span>
                <input type="text" v-model="userForm.nickName">
              </label>
              <label>
                <span>用户密码</span>
                <input type="text" v-model="userForm.secret">
              </label>
              <label>
                <span>电话号码</span>
                <input type="text" v-model="userForm.phoneNum">
              </label>
              <label>
                <span>性别</span>
                <select value="0" v-model="userForm.gender">
                  <option value="0">男</option>
                  <option value="1">女</option>
                </select>
              </label>
              <label>
                <span>年龄</span>
                <input type="text" v-model="userForm.age">
              </label>
              <label>
                <span>Email</span>
                <input type="text" v-model="userForm.email">
              </label>
                <label>
                    <span>地址</span>
                    <input type="text" v-model="userForm.address">
                </label>
              <label><span>有无领养</span>
                <select value="0" v-model="userForm.experience">
                  <option value="0">有领养经历</option>
                  <option value="1">没有领养经历</option>
                </select>
              </label>
            </form>
            <div class="modal-footer">
              <button class="close btn" @click="close">关闭</button>
              <button class="btn" @click="addpreserve">添加用户</button>
            </div>
          </div>
        <template v-if="flag">
          <div class="mask"></div>
        </template>
        <!-- 分页功能 -->
        <div class="page">
          <div class="leftPage">
            当前第<span>{{curPage}}</span>页
            共<span>{{totalPage}}</span>页
            <span>{{totalitem}}</span>条记录
          </div>
          <ul class="rightPage">
            <li><span @click="getPage(1)">首页</span></li>
            <li><span @click="getPage(curPage-1)">上一页</span></li>
            <!-- 用于遍历查出来的数据 -->
            <li v-for="index of totalPage"><span @click="getPage(index)">{{index}}</span></li>
            <li><span @click="getPage(curPage+1)">下一页</span></li>
            <li><span @click="getPage(totalPage)">尾页</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  const {createApp} = Vue;
  createApp({
    data() {
      return {
        users:new Map(),
        insertShow:false,
        updateShow:false,
        flag:false,
        userForm:{},
        nickname:"",
        u:new Map(),
        // 分页部分
        pageSize:2,
        // 总数据数
        totalitem:0,
        // 当前页
        curPage:0,
        // 总页数
        totalPage:0,
      }
    },
    created() {
      this.reload();
    },
    methods: {

      // 分页函数
      getPage(index) {
        const that = this;
        if(index===0) index=1;
        if(index>=this.totalPage) index=this.totalPage;
        axios({
          method:"get",
          url:"/user/getpage?index="+index,

        }).then(function (res) {
          that.users = res.data.page.pageContentList;
          that.curPage = res.data.page.curPage;
        })
      },

      reset() {
        this.reload();
      },

      reload() {
        const that = this;
        axios({
          method:"get",
          url:"/user/getallusers?pageSize="+this.pageSize,
        }).then(function (res) {
          that.users = res.data.page.pageContentList;
          that.totalitem = res.data.page.totalitem;
          that.curPage = res.data.page.curPage;
          that.totalPage = res.data.page.totalPage;
          console.log(that.totalitem)
          console.log(res.data.page);
          // console.log(JSON.parse(JSON.stringify(that.users)));
        })
      },

      close(){
        this.insertShow = false;
        this.updateShow = false
        this.flag = false;
      },
      add() {
        this.insertShow = true;
        this.flag = true
        this.userForm = {};
      },
      update(id) {
        const that = this;
        this.updateShow = true;
        this.flag = true;
        axios({
          method: "get",
          url:"/user/getuserbyid?uid="+id,
          contentType: 'application/json',
        }).then(function (res) {
          if (res.data.code===200) {
            // console.log(res.data.contents)
            // console.log(id)
            that.u = res.data.contentList[0];
            console.log(res.data.contentList[0])
            document.getElementById('nickName').value=res.data.contentList[0].nickName;
            document.getElementById('secret').value=res.data.contentList[0].secret;
            document.getElementById('gender').value=res.data.contentList[0].gender;
            document.getElementById('age').value=res.data.contentList[0].age;
            document.getElementById('phoneNum').value=res.data.contentList[0].phoneNum;
            document.getElementById('email').value=res.data.contentList[0].email;
              document.getElementById('address').value=res.data.contentList[0].address;
            document.getElementById('experience').value=res.data.contentList[0].experience;
          }
        })

      },
      // 删除功能
      del(id) {
        const that = this;
        console.log(typeof id)
        axios({
          method: "get",
          url:"/user/deluser?uid="+id,
          // contentType: 'application/json',

        }).then(function (res) {
          if(res.data.code===200) {
            alert("删除成功")
            that.reload();
          }
        })

      },
      updatepreserve() {
        const that = this;
        console.log(this.u);
        console.log(JSON.parse(JSON.stringify(this.u)).id);
          // 编辑
          axios({
            method: "post",
            url:" /user/updateuser",
            contentType: 'application/json',
            data:{
              "id":JSON.parse(JSON.stringify(this.u)).id,
              "nickName": document.getElementById('nickName').value,
              "secret":document.getElementById('secret').value,
              "gender":document.getElementById('gender').value,
              "age":document.getElementById('age').value,
              "phoneNum":document.getElementById('phoneNum').value,
              "email":document.getElementById('email').value,
              "address":document.getElementById('address').value,
              "experience":document.getElementById('experience').value,
            },
          }).then(function (res) {
            if (res.data.code===200) {
              that.close();
              that.reload();
            }
          })
      },

      addpreserve() {
        const that = this;
          console.log(this.userForm.address);
        // 新增
        axios({
          method: "post",
          url:" /user/newuser",
          contentType: 'application/json',
          data:{
            "nickName": this.userForm.nickName,
            "secret":this.userForm.secret,
            "gender":this.userForm.gender ,
            "age":this.userForm.age,
            "phoneNum":this.userForm.phoneNum,
            "email":this.userForm.email,
            "address":this.userForm.address,
            "experience":this.userForm.experience,
          },
        }).then(function (res) {
          if (res.data.code===200) {
            that.close();
            that.reload();
          }
        })
      },

      searchByUsername() {
        console.log(this.nickname)
        const that = this;
        axios({
          method: "get",
          url:" /user/getbyname?nickname="+that.nickname,
          contentType: 'application/json',
        }).then(function (res) {
          console.log(res.data)
          that.users = res.data.contentList;
          console.log(res.data.contentList);
        })
      },
    }
  }).mount("#root")
</script>
</body>
</html>